<template>
  <h1>vue路由</h1>
  <!-- 
    当项目里面使用了vue-router
    那么就可以直接使用 RouterLink 组件
    必须要加to属性，相当于a标签的href属性
  -->
  <RouterLink to="/hot">热映</RouterLink> |
  <!-- <RouterLink to="/cinema">影院</RouterLink> | -->
  <RouterLink :to="{ name: 'cinema' }">影院</RouterLink> |
  <RouterLink to="/wait">待映</RouterLink> |
  <RouterLink to="/detail/1234">详情页1</RouterLink> |
  <!-- <RouterLink to="/detail/5678">详情页2</RouterLink> | -->
  <RouterLink :to="{ name: 'detail', params: { id: '5678' } }">
    详情页2
  </RouterLink>
  |

  <hr />

  <!-- 
    可以直接使用RouterView组件 
    相当于是存放切换内容的容器
  -->
  <RouterView />

  <!-- 命名视图, 一个url对应多个页面 -->
  <RouterView name="Wait" />
  <RouterView name="Wait2" />
</template>

<style>
/* 当前选中的那个RouterLink，可以直接加router-link-active添加高亮 */
/* 模糊匹配 */
/* .router-link-active {
  font-weight: 900;
  color: red;
} */

/* 精准匹配 */
.router-link-exact-active {
  font-weight: 900;
  color: blue;
}
</style>
